<template>
  <div class="emp-wrap">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" size="medium" 
            v-model="empsSearchVal">
          </el-input>
          <div class="emp-list">
            <el-table v-loading="loading" ref="singleTable" :data="empData.staffList" @row-click="handleCurrentChange"
              :row-class-name="tableRowClassName" size="medium">
              <el-table-column prop="empId" label="工号" width="100"> </el-table-column>
              <el-table-column prop="name" label="姓名" width="100"></el-table-column>
              <el-table-column prop="deptName" label="部门全称"> </el-table-column>
            </el-table>
            <div class="emp-page">
              <el-pagination small @current-change="handleCurrentPage" :current-page.sync="cur" :page-size="pageSize"
                :pager-count="5" :background="true" layout="prev, pager, next, total" :total="empData.total">
              </el-pagination>
            </div>

          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple emp-choose">
          <span style="line-height: 40px">已选择员工：</span>
          <el-button size="small" style="float: right;" @click="handleClear">清空</el-button>
          <el-card class="box-card" shadow="never">
            <div v-if="chooseEmpArr.length > 0">
              <el-row v-for="item in chooseEmpArr" :key="item.empId" class="text item">
                <el-col :span="4"><span>{{ item.empId }}</span></el-col>
                <el-col :span="5"><span>{{ item.name }}</span></el-col>
                <el-col :span="14"><span>{{ item.deptName }}</span></el-col>
                <el-col :span="1"><i class="el-icon-circle-close" @click="delEmpInfo(item.empId)"></i></el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "Emp",
  props: {
    empData: Object,
    empChooseInfoOld: Array,
    value: String,
    loading: Boolean,
    currentPage: Number,
  },
  data () {
    return {
      // loading: false,
      empsSearchVal: '',
      cur: 1,
      pageSize: 9,
      // tableData: [],
      chooseEmpArr: [],
      isExist: false
    }
  },
  mounted () {
    this.recoverData();
  },
  watch: {
    // 通过输入的关键字自动检索
    empsSearchVal (val) {
      this.$emit('input', val);
    },
    value (val) {
      this.empsSearchVal = val;
    },

    currentPage () {
      this.cur = this.currentPage;
    }
  },
  methods: {
    /**
     * 恢复上次没有点击确定之前的数据
     */
    recoverData () {
      if (this.empChooseInfoOld.length) {
        this.chooseEmpArr = [].concat(this.empChooseInfoOld);
      } else {
        this.chooseEmpArr = []
      }

    },

    tableRowClassName (row) {
      if (this.chooseEmpArr.find((item) => item.empId == row.row.empId)) {
        return "row-select";
      }
      return "";
    },
    /**
     * 点击当前表格数据
     */
    handleCurrentChange (newVal) {
      let vm = this;
      if (newVal) {
        vm.chooseEmpArr.filter((item, index) => {
          if (item.empId == newVal.empId) {
            vm.chooseEmpArr.splice(index, 1)
            return vm.isExist = true;
          }
        })
        if (!vm.isExist) {
          vm.chooseEmpArr.push(newVal);
          vm.$emit('choose-emp', vm.chooseEmpArr);
        } else {
          vm.isExist = false;
        }
      }
    },
    /**
     * 删除选中员工信息
     */
    delEmpInfo (delVal) {
      let vm = this;
      vm.chooseEmpArr = vm.chooseEmpArr.filter((item) => {
        return item.empId != delVal;
      })
      // this.$refs.singleTable.setCurrentRow();
      vm.$emit('choose-emp', vm.chooseEmpArr);
    },
    /**
     * 改变当前页码
     */
    handleCurrentPage (val) {
      this.cur = val;
      this.$emit('change-page', val);
    },
   
    /**
     * 清空操作
     */
    handleClear () {
      // this.$refs.singleTable.setCurrentRow();
      this.chooseEmpArr = [];
      this.$emit('choose-emp', this.chooseEmpArr);
      this.$emit('is-clear-btn', true);
    }
  }
}
</script>
<style lang="scss" scoped>
.emp-wrap {
  .grid-content {
    text-align: left;

    .emp-list {
      position: relative;
      margin-top: 15px;
      width: 100%;
      height: 470px;
      border: 1px solid #DCDCDC;
      border-radius: 3px;
      background: #F8F8F8;

      .emp-page {
        position: absolute;
        bottom: 0px;
        width: 100%;
        border-top: 1px solid #DCDCDC;
      }
    }

    .text {
      font-size: 14px;
    }

    .item {
      padding: 5px 0 5px 0;
      display: flex;
      justify-content: space-between;
    }

    .box-card {
      height: 470px;
      margin: 10px 0px 20px 0px;

      // background: #F8F8F8;
      // /deep/ .el-card__body {
      //   padding: 0px 20px;
      //   height: 470px;
      //   overflow: auto;
      // }
      .el-icon-circle-close {
        float: right;
        cursor: pointer;
      }
    }

    // /deep/ .el-table .cell {
    //   white-space: nowrap;
    // }
  }

  // /deep/ .el-table td{
  //   border-bottom: 1px solid #DCDCDC;
  //   // background: #F8F8F8;
  // }
  // /deep/ .el-table th{
  //   background: #F0F5FA;
  // }
  // /deep/ tr.el-table__row.row-select {
  //   background-color: #eeeeee ;
  // }
  // /deep/.el-table__row td:not(.is-hidden):last-child {
  //   border-left: none;
  // }
}
</style>

